<template>
	<div class="app-container">
		<el-form
			:model="queryParams"
			ref="queryForm"
			:inline="true"
			v-show="showSearch"
			label-width="68px"
		>
			<el-form-item
				label="格式"
				prop="format"
			>
				<el-select
					v-model="queryParams.format"
					placeholder="请选择格式"
					clearable
					size="small"
				>
					<el-option
						v-for="dict in formatOptions"
						:key="dict.dictValue"
						:label="dict.dictLabel"
						:value="dict.dictValue"
					/>
				</el-select>
			</el-form-item>
			<el-form-item
				label="审核状态"
				prop="status"
			>
				<el-select
					v-model="queryParams.status"
					placeholder="请选择审核状态"
					clearable
					size="small"
				>
					<el-option
						v-for="dict in statusOptions"
						:key="dict.dictValue"
						:label="dict.dictLabel"
						:value="dict.dictValue"
					/>
				</el-select>
			</el-form-item>
				<el-form-item
					label="类型"
					prop="infoType"
				>
					<el-select
						v-model="queryParams.infoType"
						placeholder="请选择类型"
					>
						<el-option
							v-for="dict in controlOptions"
							:key="dict.dictValue"
							:label="dict.dictLabel"
							:value="parseInt(dict.dictValue)"
						></el-option>
					</el-select>
				</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					size="mini"
					@click="handleQuery"
				>搜索</el-button>
				<el-button
					icon="el-icon-refresh"
					size="mini"
					@click="resetQuery"
				>重置</el-button>
			</el-form-item>
		</el-form>

		<el-row
			:gutter="10"
			class="mb8"
		>
			<el-col :span="1.5">
				<el-button
					type="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					v-hasPermi="['led:approval:add']"
				>新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="success"
					plain
					icon="el-icon-edit"
					size="mini"
					:disabled="single"
					@click="handleUpdate"
					v-hasPermi="['led:approval:edit']"
				>修改</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="danger"
					plain
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDelete"
					v-hasPermi="['led:approval:remove']"
				>删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					v-hasPermi="['led:approval:export']"
				>导出</el-button>
			</el-col>
			<right-toolbar
				:showSearch.sync="showSearch"
				@queryTable="getList"
			></right-toolbar>
		</el-row>

		<el-table
			v-loading="loading"
			:data="approvalList"
			@selection-change="handleSelectionChange"
		>
			<el-table-column
				type="selection"
				width="55"
				align="center"
			/>
			<el-table-column
				label="主键"
				align="center"
				prop="id"
			/>
			<el-table-column
				label="主题"
				align="center"
				prop="theme"
			/>
			<el-table-column
				label="内容"
				align="center"
				prop="showContent"
			/>
			<el-table-column
				label="格式"
				align="center"
				prop="format"
				:formatter="formatFormat"
			/>
			<el-table-column
				label="类型"
				align="center"
				prop="infoType"
				:formatter="infoTypeFormat"
			/>
			<el-table-column
				label="时长"
				align="center"
				prop="stopTime"
			>
			<template slot-scope="scope">
{{scope.row.stopTime==0?"静":scope.row.stopTime}}
			</template>
			</el-table-column>
			<el-table-column
				label="位置"
				align="center"
				prop="positions"
			/>
			<el-table-column
				label="审核状态"
				align="center"
				prop="status"
				:formatter="statusFormat"
			/>
			<el-table-column
				label="申请人"
				align="center"
				prop="sqUser"
			/>
			<el-table-column
				label="申请时间"
				align="center"
				prop="sqTime"
				width="180"
			>
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.sqTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
				</template>
			</el-table-column>
			<el-table-column
				label="审批时间"
				align="center"
				prop="spTime"
				width="180"
			>
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.spTime, '{y}-{m}-{d} {h}:{m}:{s}')}}</span>
				</template>
			</el-table-column>
			<el-table-column
				label="操作"
				align="center"
				width="180"
				class-name="small-padding fixed-width"
			>
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-s-check"
						:disabled="scope.row.status!=0?true:false"
						@click="handleApproval(scope.row)"
						v-hasPermi="['led:approval:verify']"
					>审批</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['led:approval:edit']"
					>修改</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['led:approval:remove']"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total>0"
			:total="total"
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			@pagination="getList"
		/>

		<!-- 添加或修改发布审批管理对话框 -->
		<el-dialog
			:title="title"
			:visible.sync="open"
			width="500px"
			append-to-body
		>
			<el-form
				ref="form"
				:model="form"
				:rules="rules"
				label-width="80px"
			>
				<el-form-item
					label="主题"
					prop="theme"
				>
					<el-input
						v-model="form.theme"
						placeholder="请输入主题"
					/>
				</el-form-item>
				<el-form-item
					label="内容"
					prop="showContent"
				>
					<el-input
						v-model="form.showContent"
						type="textarea"
						placeholder="请输入内容"
					/>
				</el-form-item>
				<el-form-item
					label="格式"
					prop="format"
				>
					<el-select
						v-model="form.format"
						placeholder="请选择格式"
					>
						<el-option
							v-for="dict in formatOptions"
							:key="dict.dictValue"
							:label="dict.dictLabel"
							:value="parseInt(dict.dictValue)"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					v-if="form.format==1"
					label="时长"
					prop="stopTime"
				>
					<el-input
						v-model="form.stopTime"
						placeholder="请输入时长"
					/>
				</el-form-item>
				<el-form-item
					label="类型"
					prop="infoType"
				>
					<el-select
						v-model="form.infoType"
						placeholder="请选择类型"
					>
						<el-option
							v-for="dict in controlOptions"
							:key="dict.dictValue"
							:label="dict.dictLabel"
							:value="parseInt(dict.dictValue)"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="位置"
					prop="positions"
				>
					<el-input
						v-model="form.positions"
						placeholder="请输入位置"
					/>
				</el-form-item>
				<el-form-item
					label="审核状态"
					prop="status"
				>
					<el-select
						v-model="form.status"
						placeholder="请选择审核状态"
					>
						<el-option
							v-for="dict in statusOptions"
							:key="dict.dictValue"
							:label="dict.dictLabel"
							:value="parseInt(dict.dictValue)"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="申请人"
					prop="sqUser"
				>
					<el-input
						v-model="form.sqUser"
						placeholder="请输入申请人"
					/>
				</el-form-item>
				<el-form-item
					label="申请时间"
					prop="sqTime"
				>
					<el-date-picker
						clearable
						size="small"
						v-model="form.sqTime"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="选择申请时间"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item
					label="审批时间"
					prop="spTime"
				>
					<el-date-picker
						clearable
						size="small"
						v-model="form.spTime"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="选择审批时间"
					>
					</el-date-picker>
				</el-form-item>
			</el-form>
			<div
				slot="footer"
				class="dialog-footer"
			>
				<el-button
					type="primary"
					@click="submitForm"
				>确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		listApproval,
		getApproval,
		delApproval,
		addApproval,
		updateApproval,
		verify,
	} from "@/api/led/approval";

	export default {
		name: "Approval",
		components: {},
		data() {
			return {
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 发布审批管理表格数据
				approvalList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				//格式字典
				formatOptions: [],
								// 类型字典
				controlOptions: [],
				// 审核状态字典
				statusOptions: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					format: null,
					status: null,
						infoType:null,
				},
				// 表单参数
				form: {},
				// 表单校验
				rules: {
					theme: [
						{
							required: true,
							message: "主题不能为空",
							trigger: "blur",
						},
					],
					showContent: [
						{
							required: true,
							message: "内容不能为空",
							trigger: "blur",
						},
					],
					format: [
						{
							required: true,
							message: "格式不能为空",
							trigger: "change",
						},
					],
					stopTime: [
						{
							required: true,
							message: "时长不能为空",
							trigger: "blur",
						},
					],
					positions: [
						{
							required: true,
							message: "位置不能为空",
							trigger: "blur",
						},
					],
					ledIds: [
						{
							required: true,
							message: "Led ids不能为空",
							trigger: "blur",
						},
					],
					status: [
						{
							required: true,
							message: "审核状态不能为空",
							trigger: "change",
						},
					],
					sqUser: [
						{
							required: true,
							message: "申请人不能为空",
							trigger: "blur",
						},
					],
					sqTime: [
						{
							required: true,
							message: "申请时间不能为空",
							trigger: "blur",
						},
					],
							infoType:[
							{
							required: true,
							message: "类型不能为空",
							trigger: "change",
						},
					]
				},
			};
		},
		created() {
			this.getList();
			this.getDicts("led_format_type").then((response) => {
				this.formatOptions = response.data;
			});
						this.getDicts("led_control_type").then((response) => {
				this.controlOptions = response.data;
			});
			this.getDicts("led_approval_status").then((response) => {
				this.statusOptions = response.data;
			});
		},
		methods: {
			// 审批
			handleApproval(e) {
				console.log(e);
				this.$confirm("审批是否通过", "提示", {
					distinguishCancelAndClose: true,
					confirmButtonText: "通过",
					cancelButtonText: "不通过",
					type: "warning",
				})
					.then(() => {
						verify({ id: e.id, status: 1 }).then((res) => {
							this.getList();
							this.$message({
								type: "success",
								message: "已通过!",
							});
						});
					})
					.catch((action) => {
						console.log(action);
						if (action === "cancel") {
							verify({ id: e.id, status: -1 }).then((res) => {
								this.getList();
								this.$message({
									type: "error",
									message: "未通过!",
								});
							});
						}else if(action === "close"){
							this.$message({
									type: "info",
									message: "已取消!",
								});
						}
					});
				// .catch(() => {
				// 	verify({ id: e.id, status: -1 }).then((res) => {
				// 		this.getList();
				// 		this.$message({
				// 			type: "info",
				// 			message: "未通过!",
				// 		});
				// 	});
				// });
			},
			/** 查询发布审批管理列表 */
			getList() {
				this.loading = true;
				listApproval(this.queryParams).then((response) => {
					this.approvalList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 格式字典翻译
			formatFormat(row, column) {
				return this.selectDictLabel(this.formatOptions, row.format);
			},
			// 类型字典翻译
				infoTypeFormat(row, colum) {
				return this.selectDictLabel(this.controlOptions, row.infoType);
			},
			// 审核状态字典翻译
			statusFormat(row, column) {
				return this.selectDictLabel(this.statusOptions, row.status);
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					id: null,
					theme: null,
					showContent: null,
					format: null,
					stopTime: null,
					positions: null,
					ledIds: null,
					status: null,
					sqUser: null,
					sqTime: null,
					spTime: null,
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map((item) => item.id);
				this.single = selection.length !== 1;
				this.multiple = !selection.length;
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加发布审批管理";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const id = row.id || this.ids;
				getApproval(id).then((response) => {
					this.form = response.data;
					this.open = true;
					this.title = "修改发布审批管理";
				});
			},
			/** 提交按钮 */
			submitForm() {
				this.$refs["form"].validate((valid) => {
					if (valid) {
						if (this.form.id != null) {
							updateApproval(this.form).then((response) => {
								this.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							addApproval(this.form).then((response) => {
								this.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$confirm(
					'是否确认删除发布审批管理编号为"' + ids + '"的数据项?',
					"警告",
					{
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					}
				)
					.then(function () {
						return delApproval(ids);
					})
					.then(() => {
						this.getList();
						this.msgSuccess("删除成功");
					});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download(
					"led/approval/export",
					{
						...this.queryParams,
					},
					`led_approval.xlsx`
				);
			},
		},
	};
</script>